<template>
    <div class="address">
        <van-nav-bar
                title="消息"
                class="header"
                left-text=""
                
                >
                <template #right>
                    <div @click="jumpPage('/chatmember')" class="panel">
                        <van-icon name="contact" color="#739576" size="30" style="margin-top:10px"/>
                    </div>
                    <div @click="goToGroup()" class="panel">
                    <!-- <i class="friends-o"></i>  -->
                        <van-icon name="friends-o" color="#739576" size="30" style="margin-top:10px"/>
                    </div>
                </template>
        </van-nav-bar>
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="height:100%;width:100%">
            <div v-if="notfound" class="notfound">
                 <img src="img/notfound/notfound.png">
            </div>

        <div v-else class="botbox">
            <div v-for="item in chatList" :key="item.name" @click="toChat(item)">
                <van-swipe-cell>
                    <van-cell :border="false">
                        <div class="chatlistitem">
                            <div style="height:100%;">
                                <img style="height:4rem;width: 4rem;margin: 0.5rem" v-if="item.isgroup===false" src="img/headimg/head_icon_2.png" alt />
                                <img style="height:4rem;width: 4rem;margin: 0.5rem" v-if="item.isgroup===true" src="img/headimg/head_icon.png" alt />
                            </div>
                            <div style="height:100%;display:flex;flex-direction:column;padding:0.5rem 0 0.5rem 0.5rem;">
                                <div style="flex:1;display:flex;font-size:1rem;align-items:center;line-height: 2rem">
                                    {{ item.name }}
                                </div>
                                <div style="line-height:2rem;" v-if="item.type==='文字'">
                                    {{ item.content.length>20? item.content.substr(0,20)+'...':item.content}}
                                </div>
                                <div style="line-height:2rem;" v-if="item.type==='语音'">
                                    {{ item.content.substring(item.content.length - 4) == '.txt'? "[语音]":"[不支持播放类型]" }}
                                </div>
                                <div style="line-height:2rem;" v-if="item.type==='图片'">
                                    [图片]
                                </div>
                            </div>
                            <div style="margin-left:auto;padding:0.5rem 0 0.5rem 0.5rem;">
                                <div style="font-size:1rem;align-items:center;line-height: 2rem">{{ item.time }}</div>
                                <div style="line-height:2rem;">
                                    <span class="listErrorContent" v-show="item.isread===false">！未读</span>
                                </div>
                            </div>
                        </div>
                        <!-- {{item.isread}} -->
                    </van-cell>
                    <template #right>
                        <van-button style="height:100%" square type="danger" text="删除" @click="deleteChat(item.id)"/>
                    </template>
                </van-swipe-cell>
            </div>
        </div>
        </van-pull-refresh>
    </div>
</template>
<style scoped>
.address {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .address .header{
        /* background-color: #153744; */
        color: black;
    }
    .address .tanBox{
        /* background-color: rgba(21, 55, 68, 0.71); */
        color: black;
        position: fixed;
        top: 45px;
        z-index: 999;
        right: 5px;
        width: 8rem;
    }
    .address .tanBox .tanBoxInfo{
        line-height: 30px;
        font-size: 16px;
        margin: 10px 0;
    }
    /deep/ .van-nav-bar .van-icon {
        /* color: #ffffff; */
        color: lightgray;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        /* color: #ffffff; */
        color: black;
        font-size:18px;
    }
    .underbox {
        display: flex;
        flex-direction: column;
    }
    /deep/ .underbox .van-tabbar-item{
        color: #999999;
    }
    /deep/ .underbox .van-tabbar-item--active {
        color:  #153744;
        background-color: #fff;
    }
.topHeader{
   height:80px;
   width:100%;
   display:flex;
   background-color:lightgray;
}
.middlePanel{
    flex:2
}
.emptyPanel{
    flex:1
}
.operatePanel{
    flex:1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.panel{
    width:40px;
    line-height:40px;
    align:center;
    margin-right: 20px;
    /* background-color:lightgreen */
}
.panel i{
    position: relative;
}

/* 集成聊天历史记录页 */
.chatList {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
.chatList .header{
        background-color: #153744;
        color: black;
    }
    /deep/ .van-nav-bar .van-icon {
        color: black;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        color:black;
    }

.notfound{
        display: flex;
        overflow-y: auto;
    }
    .notfound img{
        width: 100%;
        height: 100%;
    }
    .chatlistitem {
        height: 5rem;
        display: flex;
    }
    .chatlistitem img{
        height:100%;
    }
    .botbox{
        height: calc(100% - 5px);
        overflow-y: auto;
    }
    .listTimeContent{
        display: inline-block;
        position: fixed;
        /* text-align: right; */
        right: 1rem;
        /*right: 1rem;*/
    }
    .listErrorContent{
        display: inline-block;
        position: fixed;
        right: 1rem;
        color: red;
        font-size: 12px;
    }
    .underbox {
        display: flex;
        flex-direction: column;
    }
    /deep/ .underbox .van-tabbar-item{
        color: #999999;
    }
    /deep/ .underbox .van-tabbar-item--active {
        color:  #153744;
        background-color: #fff;
    }
</style>
<script>
import bus from "./../../utils/bus"
//引入下拉刷新相关组件
import {ref} from 'vue'
import{Toast} from 'vant'

export default {
    data() {
        return {
            testData:1,
            testData2:2,
            //引用变量
            tanBoxShow:false,
            searchFriend:'',

            active: 1,
            addresslist: null,
            notfound:true,

            //下拉刷新相关变量
            isLoading:false,
            finished:false,
        }
    },
    methods: {
    
    onRefresh(){
        this.getChatList();
        console.log("刷新完毕");
        this.isLoading = false;
        if(this.chatList!=null){
            this.finished = true;
        }
    },

        jumpPage(url){
            this.$router.push(
            {
                path:url
            }
        )
        },
        changeTanBoxShow(){
            // this.tanBoxShow=!this.tanBoxShow;
            this.tanBoxShow=true;
        },
        addNewOne(){
            this.$router.push(
                    {
                        path:'/addmember'
                    }
                )
        },
        getGroupsList(){

        },

        goToGroup(){
            this.$router.push(
                    {
                        path:'/grouprelate'
                    }
                )
        },

        //聊天列表的函数
        getChatList() {
                this.chatList =[];
                let res = $App.getChatList();
                this.chatList = JSON.parse(res).reverse();
                if(this.chatList.length){
                    this.notfound = false;
                }
            },
            toChat(dt){
                if(dt.isgroup===false){
                    this.$router.push(
                        {
                            path:'/chatinfo',
                            query: {
                                id: dt.id,
                                name:dt.name
                            }
                        }
                    )
                }else if(dt.isgroup===true){
                    this.$router.push(
                        {
                            path:'/groupinfo',
                            query: {
                                id: dt.id,
                                name:dt.name
                            }
                        }
                    )
                }
            },
            toChatFun(dt){
                let obj = JSON.parse(dt);
                console.log("obj",obj);

                if(obj.isgroup==="0"){
                    this.$router.push(
                        {
                            path:'/chatinfo',
                            query: {
                                id: obj.id,
                                name:obj.name
                            }
                        }
                    )
                }else if(obj.isgroup==="1"){
                    this.$router.push(
                        {
                            path:'/groupinfo',
                            query: {
                                id: obj.id,
                                name:obj.name
                            }
                        }
                    )
                }

            },
            deleteChat(id){
                console.log(id);
                $App.delChatByPerson(id);
                this.getChatList();
            },
            //监听相关
            onmessage(data){
                //群聊人员的列表
                this.ee = data;
                
            }

    },
     mounted() {
        this.getChatList();
        window.toChatFun = this.toChatFun;
            //监听函数
        bus.$on('onmessage',dt =>{
            this.onmessage(dt);
            this.getChatList();
            
        })
    },
    created(){
        // this.getChatList();
    },
    beforeUpdate(){

    },
    computed: {
        
    },
    

}
</script>
